<template>
	<view class="content">
		<view class="fixed-layout">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<input class="search-input" focus placeholder="点击搜索雪茄" />
			</view>
			<!-- 帖子排序 -->
			<view class="list-sort-bar posts-sort">
				<button class="sort-button selected">帖子</button>
				<button class="sort-button">悬赏</button>
				<button class="sort-button">雪茄</button>
				<button class="sort-button">用户</button>
			</view>
		</view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- 空状态 -->
		<view class="content-empty empty-search-bg">
			请输入关键字
		</view>
		<!-- 搜索列表 -->
		<view class="search-list">

			<!-- 帖子 -->
			<view class="post-card">
				<!-- 用户信息 -->
				<view class="account-info post-card-account-info vip">
					<!-- 用户头像 -->
					<view class="account-head">
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
						<icon type="" class="account-hat hat-appreciation"></icon>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 男性 -->
							<icon type="" class="imgIcon icon-male"></icon>
							<!-- 女性 -->
							<!-- <icon type="" class="imgIcon icon-female"></icon> -->
						</view>
						<!-- 附加信息 -->
						<view class="plus-info">
							<!-- VIP铭牌 -->
							<text class="account-nameplate">22</text>
							<!-- SVIP铭牌 -->
							<!-- <text class="account-nameplate">22</text> -->
							<!-- 店铺 -->
							<icon type="" class="imgIcon icon-store"></icon>
							<!-- 品牌 -->
							<icon type="" class="imgIcon icon-brand"></icon>
							<!-- 认证 -->
							<icon type="" class="imgIcon icon-tobacco"></icon>
							<!-- 鉴赏家 -->
							<icon type="" class="imgIcon icon-evaluation"></icon>
						</view>
						<!-- 时间 -->
						<view class="time-info">
							<text>2019-11-12 10:21:10</text>
						</view>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 帖子菜单 -->
						<icon type="" @click="" class="fontIcon icon-more"></icon>
					</view>
				</view>
				<!-- 帖子内容 -->
				<view class="post-content">
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，
					<icon type="" class="imgIcon icon-store" />依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<image @click="" src="../../static/temp-photo-02.png" mode="widthFix" class="full-img"></image>
				</view>
				<text class="content-address">中国北京西长安街13号</text>
				<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text>
				<view class="post-bottom-bar">
					<button class="post-share-btn" @click="">转发</button>
					<button class="post-comment-btn" @click="">评论</button>
					<button class="post-thumbs-btn" @click="">点赞</button>
				</view>
			</view>
			<!-- 悬赏 -->
			<view class="post-card">
				<!-- 用户信息 -->
				<view class="account-info post-card-account-info vip">
					<!-- 用户头像 -->
					<view class="account-head">
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
						<icon type="" class="account-hat hat-appreciation"></icon>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 男性 -->
							<icon type="" class="imgIcon icon-male"></icon>
							<!-- 女性 -->
							<!-- <icon type="" class="imgIcon icon-female"></icon> -->
						</view>
						<!-- 附加信息 -->
						<view class="plus-info">
							<!-- VIP铭牌 -->
							<text class="account-nameplate">22</text>
							<!-- SVIP铭牌 -->
							<!-- <text class="account-nameplate">22</text> -->
							<!-- 店铺 -->
							<icon type="" class="imgIcon icon-store"></icon>
							<!-- 品牌 -->
							<icon type="" class="imgIcon icon-brand"></icon>
							<!-- 认证 -->
							<icon type="" class="imgIcon icon-tobacco"></icon>
							<!-- 鉴赏家 -->
							<icon type="" class="imgIcon icon-evaluation"></icon>
						</view>
						<!-- 时间 -->
						<view class="time-info">
							<text>2019-11-12 10:21:10</text>
						</view>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 帖子菜单 -->
						<!-- <icon type="" @click="" class="fontIcon icon-more"></icon> -->
						<!-- <button @click="" class="small-btn btn-bounty ">悬赏</button> -->
						<button @click="" class="small-btn btn-bounty selected">已悬赏</button>
					</view>
				</view>
				<!-- 帖子内容 -->
				<view class="post-content">

					<!-- 引用卡片 -->
					<view class="quote-card" @click="">
						<!-- 预览图,去掉后，剩余内容自动充满 -->
						<view class="preview-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!-- 引用内容 -->
						<view class="quote-content">
							<!-- 引用活动标题 -->
							<text class="quote-content-title">悬赏问题之一</text>
							<!-- 内容简介，文章、帖子、评价等文字内容的简介 -->
							<text class="quote-content-summary"><text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，依赖 display属性 +
								position属性 + float属性。</text>
							<!-- 通用类型数据 -->
							<view class="quote-content-detail">
								<!-- 悬赏积分 -->
								<!-- <text class="activity-heat">113344</text> -->
								<text class="bounty-heat">悬赏积分: 113344</text>
							</view>
						</view>
					</view>
				</view>
				<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text>
			</view>
			<!-- 雪茄 -->
			<view class="quote-card" @click="">
				<!-- 预览图,去掉后，剩余内容自动充满 -->
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<!-- 引用内容 -->
				<view class="quote-content">
					<!-- 雪茄英文名 -->
					<text class="cigar-en-name">Ramon Allones Specially Selected</text>
					<!-- 雪茄中文名 -->
					<text class="cigar-cn-name">莱蒙特选</text>
					<!-- 间隔线 -->
					<view class="spacing-line"></view>
					<!-- 五星 -->
					<view class="five-star">
						<uni-rate size="16" :touchable="false" :value="3.5" allow-half :readonly="true"/>3.5
					</view>
					<!-- 引用数据 -->
					<view class="quote-content-detail quote-cigar-content-detail">
						<view>
							<text>长度：124.0 | 环径：50.0</text>
						</view>
						<view>
							<text>产地：古巴 | 参考价格：-</text>
						</view>
					</view>
				</view>
				<view class="quote-cigar-photo">
					<view class="cigar-photo">
						<image src="../../static/temp-cigar-photo-1.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="quote-card" @click="">
				<!-- 预览图,去掉后，剩余内容自动充满 -->
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<!-- 引用内容 -->
				<view class="quote-content">
					<!-- 雪茄英文名 -->
					<text class="cigar-en-name">Ramon Allones Specially Selected</text>
					<!-- 雪茄中文名 -->
					<text class="cigar-cn-name">莱蒙特选</text>
					<!-- 间隔线 -->
					<view class="spacing-line"></view>
					<!-- 五星 -->
					<view class="five-star">
						<uni-rate size="16" :touchable="false" :value="3.5" allow-half :readonly="true" />3.5
					</view>
					<!-- 引用数据 -->
					<view class="quote-content-detail quote-cigar-content-detail">
						<view>
							<text>长度：124.0 | 环径：50.0</text>
						</view>
						<view>
							<text>产地：古巴 | 参考价格：-</text>
						</view>
					</view>
				</view>
				<view class="quote-cigar-photo">
					<view class="cigar-photo">
						<image src="../../static/temp-cigar-photo-3.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 好友 -->
			<view class="account-card">
				<!-- 用户信息 -->
				<view class="account-info post-card-account-info vip">
					<!-- 用户头像 -->
					<view class="account-head">
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
						<icon type="" class="account-hat hat-appreciation"></icon>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 男性 -->
							<icon type="" class="imgIcon icon-male"></icon>
							<!-- 女性 -->
							<!-- <icon type="" class="imgIcon icon-female"></icon> -->
						</view>
						<!-- 账号 -->
						<text class="account-id">账号: Rafael González</text>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 帖子菜单 -->
						<icon type="" @click="" class="fontIcon icon-goto"></icon>
					</view>
				</view>
			</view>
			<!-- 好友 -->
			<view class="account-card">
				<!-- 用户信息 -->
				<view class="account-info post-card-account-info vip">
					<!-- 用户头像 -->
					<view class="account-head">
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 女性 -->
							<icon type="" class="imgIcon icon-female"></icon>
						</view>
						<!-- 账号 -->
						<text class="account-id">账号: Rafael González</text>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 帖子菜单 -->
						<icon type="" @click="" class="fontIcon icon-goto"></icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 没有更多 -->
		<view class="noMore-content">
			- 没有更多了 -
		</view>

	</view>
	<!-- 浮动底栏位置补偿 -->
	<view class="filler-block"></view>
</template>

<script lang="ts">
</script>